<template>
  <div>
    <pre v-note>
        集成异步请求模块(以 axios 为例)
            1. 通过 npm 进行模块安装 npm install axios --save , npm install axios -S 
            2. 在项目需要使用的位置，通过ES6 的模块导入语法 import……from…… 进行模块加载
                + 准备一个服务器提供数据接口（真实的后端服务器|模拟数据服务器=mock服务器）
                + 基于接口进行数据请求，按照模块规则进行响应处理
                + 将数据存储于组件仓库，实现数据绑定和页面响应式渲染，如果需要可以拆分组件

        axios的基本使用
            1. axios是基于promise进行的异步请求封装，基于promise状态变化完成异步请求结果处理
            2. 不同的状态对应异步请求的不同时间和结果描述
                + pedding 表示异步请求以发送等待服务器响应
                + fulfilled 表示服务器响应结果为成功状态
                + rejected 表示异步请求失败(启动代码错误，网络错误，服务器响应错误)
            <code>
            loadUserList() {
                // axios.get(url,options={})
                // axios 通过 返回promise 对象，由状态控制后续的逻辑执行
                let p = axios.get("http://127.0.0.1:3000/user/list");
                p.then((response) => {
                    // response 对象记录了 axios 完成异步氢气时所有的使用数据
                    //      服务器响应结果
                    //      请求相关配置
                    //      原始 XMLHttpReuqest 对象
                    //      响应状态
                    //      ……
                    if (!response.data.state) {
                        // alert(response.data.msg)
                        return;
                    }
                    this.users = response.data.data;
                }).catch((error) => {
                    if (error instanceof AxiosError) {
                        if (error.response instanceof XMLHttpRequest) {
                            console.log("网络异常");
                        } else {
                            let code = error.response.status;
                            switch (code) {
                            case 404:
                                console.log("网络资源不存在");
                                break;
                            case 500:
                                console.log("服务器运行错误，请联系管理员");
                                break;
                            default:
                                console.log("请求提示，稍后重试");
                                break;
                            }
                        }
                    } else {
                        console.log("程序运行错误");
                    }
                });
            },
            </code>
        
        axios 基于 ES2017 的 async 和 await 的代码简化
            1. 在定义有promise代码的方法外围使用 async 关键字进行方法描述
            2. 在方法内部的 promise 执行代码前，通过 await 描述需要直接完成状态的fulfilled转换
            3. 被等待promise执行时如果出现rejected状态，会依据JS错误处理规则抛出错误对象,使用JS的错误捕获代码进行处理
            <code>
            async loadUserList3() {
                try {
                    let response = await axios.get("http://127.0.0.1:3000/user/list");
                    console.log("====>", response);
                    if (!response.data.state) {
                    // alert(response.data.msg)
                    return;
                    }
                    this.users = response.data.data;
                } catch (error) {
                    console.log("==error==>", error);
                    if (error instanceof AxiosError) {
                    if (error.response instanceof XMLHttpRequest) {
                        console.log("网络异常");
                    } else {
                        let code = error.response.status;
                        switch (code) {
                        case 404:
                            console.log("网络资源不存在");
                            break;
                        case 500:
                            console.log("服务器运行错误，请联系管理员");
                            break;
                        default:
                            console.log("请求提示，稍后重试");
                            break;
                        }
                    }
                    } else {
                    console.log("程序运行错误");
                    }
                }
            },
            </code>
        </pre>
    <input
      type="button"
      value="发送请求加载用户数据列表"
      @click="loadUserList()"
    />
    <input
      type="button"
      value="发送请求加载用户数据列表-ES2017"
      @click="loadUserList3()"
    />
    <hr />
    <UserInfo v-for="u in users" :key="u.id" :user="u"></UserInfo>
  </div>
</template>

<script>
import axios, { AxiosError } from "axios";
import UserInfo from "@/components/UserInfo.vue";

export default {
  components: {
    UserInfo,
  },
  data() {
    return {
      users: [],
    };
  },
  methods: {
    loadUserList2() {
      // ajax 请求
      console.group("无请求体请求");
      console.log(axios.get);
      console.log(axios.delete);
      console.groupEnd();

      console.group("有请求体请求");
      console.log(axios.post);
      console.log(axios.put);
      console.log(axios.patch);
      console.groupEnd();

      console.group("服务测试请求-浏览器自动发送");
      console.log(axios.head);
      console.log(axios.options);
      console.groupEnd();
    },
    loadUserList() {
      // axios.get(url,options={})
      // axios 通过 返回promise 对象，由状态控制后续的逻辑执行
      let p = axios.get("http://127.0.0.1:3000/user/list");
      console.log(p);
      p.then((response) => {
        // let a = null;
        // console.log(a.a)
        // response 对象记录了 axios 完成异步氢气时所有的使用数据
        //      服务器响应结果
        //      请求相关配置
        //      原始 XMLHttpReuqest 对象
        //      响应状态
        //      ……
        console.log("异步请求成功", response);
        console.log("异步请求成功", response.data.state);
        console.log("异步请求成功", response.data.data);
        if (!response.data.state) {
          // alert(response.data.msg)
          return;
        }
        this.users = response.data.data;
      }).catch((error) => {
        console.log("异步请求失败:", error);
        if (error instanceof AxiosError) {
          if (error.response instanceof XMLHttpRequest) {
            console.log("网络异常");
          } else {
            let code = error.response.status;
            switch (code) {
              case 404:
                console.log("网络资源不存在");
                break;
              case 500:
                console.log("服务器运行错误，请联系管理员");
                break;
              default:
                console.log("请求提示，稍后重试");
                break;
            }
          }
        } else {
          console.log("程序运行错误");
        }
      });
    },
    async loadUserList3() {
      try {
        let response = await axios.get("http://127.0.0.1:3000/user/list");
        console.log("====>", response);
        if (!response.data.state) {
          // alert(response.data.msg)
          return;
        }
        this.users = response.data.data;
      } catch (error) {
        console.log("==error==>", error);
        if (error instanceof AxiosError) {
          if (error.response instanceof XMLHttpRequest) {
            console.log("网络异常");
          } else {
            let code = error.response.status;
            switch (code) {
              case 404:
                console.log("网络资源不存在");
                break;
              case 500:
                console.log("服务器运行错误，请联系管理员");
                break;
              default:
                console.log("请求提示，稍后重试");
                break;
            }
          }
        } else {
          console.log("程序运行错误");
        }
      }
    },
  },
  created() {
    // this.loadUserList()
  },
};
</script>